<template>
    <div class="centermap">
<!--        <div class="maptitle">-->
<!--            <div class="zuo">-->
<!--                <img class="topIcon" src="../../assets/img/topIcon.png">-->
<!--                <div class="aggregate">-->
<!--                    <div class="text">文件藏品总数（件/套）</div>-->
<!--                    <div class="num">{{ formatThousand(1717354) }}</div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="zuo">-->
<!--                <img class="topIcon" src="../../assets/img/topIcon.png">-->
<!--                <div class="aggregate">-->
<!--                    <div class="text">珍贵文物数（件/套）</div>-->
<!--                    <div class="num">{{ formatThousand(16171) }}</div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="mapwrap">
            <div class="ranking-item1" v-for="(item,index) in rankingData" :key="item.id">
                <div class="left">
                    <div class="number">{{ index + 1 }}.</div>
                    <div class="name">{{ item.name }}</div>
                </div>
                <div class="right">{{ formatThousand(item.valule) }}</div>
            </div>
            <div class="ranking-item2" v-for="(item,index) in rankingData2" :key="item.id">
                <div class="left">
                    <div class="number">{{ index + 4 }}.</div>
                    <div class="name">{{ item.name }}</div>
                </div>
                <div class="right">{{ formatThousand(item.valule) }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['childMessage'],
    data() {
        return {
            maptitle: "藏品年代数据统计",
            rankingData: [
                {id: 1, ranking: "1.", name: "唐", number: 1143398},
                {id: 2, ranking: "2.", name: "清", number: 1143398},
                {id: 3, ranking: "3.", name: "宋", number: 1143398},
            ],
            rankingData2: [
                {id: 1, ranking: "4.", name: "汉", number: 1143398},
                {id: 2, ranking: "5.", name: "中华人民共和国", number: 1143398},
                {id: 3, ranking: "6.", name: "明朝", number: 1143398},
                {id: 4, ranking: "7.", name: "周", number: 1143398},
                {id: 5, ranking: "8.", name: "中华民国", number: 1143398},
                {id: 6, ranking: "9.", name: "元", number: 1143398},
                {id: 7, ranking: "10.", name: "南北朝", number: 1143398},
            ]
        };
    },
    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.rankingData = this.childMessage.slice(0, 3);
            this.rankingData2 = this.childMessage.slice(3);
            // console.log(this.rankingData, "this.rankingData");
            // console.log(this.rankingData2, "this.rankingData2");
        });
    },
    methods: {
        formatThousand(value) {
            if (typeof value !== 'number') {
                return value;
            }
            return value.toLocaleString();
        },
    },
};
</script>
<style lang="scss" scoped>
.centermap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    //margin-bottom: 30px;

    .maptitle {
        //height: 60px;
        display: flex;
        justify-content: space-evenly;
        //padding-top: 10px;
        box-sizing: border-box;

        .zuo {
            display: flex;
            align-items: flex-end;
            //width: 332px;
            height: 110px;

            .topIcon {
                width: 80px;
                height: 110px;
            }

            .aggregate {
                height: 65px;
                margin-left: 20px;

                .text {
                    color: #fff;
                    font-size: 16px;
                    padding-bottom: 5px;
                    margin-bottom: 10px;
                }

                .num {
                    font-size: 30px;
                    font-weight: 600;
                    letter-spacing: 5px;
                }
            }
        }

        .you {
            //background: url("../../assets/img/xieyou.png") no-repeat;
        }
    }

    .mapwrap {
        width: 432px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        //background: url("../../assets/img/ranking-bg.png") no-repeat;
        background-size: cover;
        //padding-top: 77px;
        font-size: 14px;
        font-weight: 500;
        transform: scale(0.8) translate(0%, -8%);

        .ranking-item1, .ranking-item2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 24px;
            background: url("../../assets/img/ranking-item1.png") no-repeat;
            background-size: cover;
            margin-bottom: 9px;

            .left {
                display: flex;
                margin-left: 10px;

                .name {
                    margin-left: 50px;
                }
            }

            .right {
                margin-right: 12px;
                letter-spacing: 2px;
            }
        }

        .ranking-item2 {
            background: url("../../assets/img/ranking-item2.png") no-repeat;
            background-size: cover;

            &:last-child .name {
                margin-left: 40px;
            }
        }
    }
}
</style>
